<script>
  import { onMount, onDestroy } from "svelte"
  import Loading from "../css3/loading/loading.svelte"
  let photos = []

  onMount(async () => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/photos?_limit=15`
    )
    photos = await res.json()
  })

  //====================================
  let seconds = 0
  onInterval(() => (seconds += 1), 1000)
  function onInterval(callback, milliseconds) {
    const interval = setInterval(callback, milliseconds)

    onDestroy(() => {
      clearInterval(interval)
    })
  }
  //==================================
  import Bot from "./components/bot.svelte"
</script>

<Bot />
<p>
  The page has been open for {seconds}
  {seconds === 1 ? "second" : "seconds"}
</p>
<h1>Photo album</h1>

<div class="photos">
  {#each photos as photo}
    <figure>
      <img src={photo.thumbnailUrl} alt={photo.title} />
      <figcaption>{photo.title}</figcaption>
    </figure>
  {:else}
    <!-- this block renders when photos.length === 0 -->
    <Loading />
  {/each}
</div>

<style>
  .photos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
  }

  figure,
  img {
    width: 100%;
    margin: 0;
  }
</style>
